<template>
    <el-dialog :title="activeName" :visible.sync="showAddStoreDialog" center width="1400px">
        <el-tabs tab-position="left"  v-model="activeName" style="height: 1000px;">
            <el-tab-pane label="基础信息" name="基础信息">
                <div style="margin:0 auto;height:800px;padding:50px 50px 100px;overflow:scroll;">
                    <el-form label-position="left" :model="newcourses" :rules="rules">
                        <el-form-item label="课程名称：" :label-width="formLabelWidth" prop="title">
                            <el-input
                                type="textarea"
                                placeholder="请输入内容"
                                v-model="newcourses.title"
                                maxlength="30"
                                show-word-limit
                            >
                            </el-input>
                        </el-form-item>

                        <el-form-item label="课程封面：" :label-width="formLabelWidth" prop="img">
                            <div class="upload_head_img">
                                
                                <el-upload
                                    :show-file-list="false"
                                    action=""
                                    :before-upload="beforeAvatarUpload"
                                    :http-request="upload_picture"
                                    >
                                    <img v-if="newcourses.img" :src="newcourses.img" class="avatar">
                                    <i v-else class="el-icon-plus"></i>
                                </el-upload>
                            </div>
                        </el-form-item>

                        <el-form-item label="库存数量：" :label-width="formLabelWidth" prop="quantity">
                            <el-input v-model="newcourses.quantity" placeholder="请输入库存数量" autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item label="课程原价:" :label-width="formLabelWidth" prop="original_price">
                            <div>
                                <div>
                                    <el-input style="width:100px;" v-model="newcourses.original_price"></el-input>
                                    <span style="margin-left:80px;">课程优惠价：</span>
                                    <el-input style="width:100px;" v-model="newcourses.special_price"></el-input>
                                </div>
                            </div>
                        </el-form-item>

                        <el-form-item label="推广时间：" :label-width="formLabelWidth" prop="promotion_time">
                            <el-date-picker
                                v-model="newcourses.promotion_time"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                @blur="timeutil()">
                            </el-date-picker>
                        </el-form-item>
                        
                        <el-form-item label="推荐有效规则：" :label-width="formLabelWidth" prop="illustration">
                            <el-input
                                type="textarea"
                                placeholder="请输入内容"
                                v-model="newcourses.illustration"
                                show-word-limit
                            >
                            </el-input>
                        </el-form-item>

                        <el-form-item label="收益分配规则：" :label-width="formLabelWidth">
                            <el-switch
                                v-model="newcourses.open_recommendation"
                                :active-value="1"
                                :inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#dbdbdb">
                            </el-switch>
                        </el-form-item>
                        <el-form-item v-if="newcourses.open_recommendation===1?true:false">
                            <span style="display:block">直接推荐收益：<el-input style="width:500px;"  v-model="newcourses.first_money" placeholder="请输入推荐收益" ></el-input></span>
                            <span>间接推荐收益：<el-input style="width:500px;" placeholder="请输入间接收益" v-model="newcourses.second_money"></el-input></span>
                        </el-form-item>

                        <el-form-item label="短信通知：" :label-width="formLabelWidth">
                            <el-switch
                                v-model="newcourses.send_sms_open"
                                :active-value="1"
                                :inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#dbdbdb">
                            </el-switch>
                        </el-form-item>
                        <el-form-item  v-if="newcourses.send_sms_open===1?true:false">
                            <span style="display:block">短信模板ID：
                                <el-input style="width:500px" v-model="newcourses.sms_templateid" placeholder="请输入家长收到的短信通知链接" autocomplete="off"></el-input>
                            </span>
                        </el-form-item>
                        <el-form-item v-if="newcourses.send_sms_open===1?true:false">
                            <span style="display:block">短信通知内容：
                                <el-input
                                    type="textarea"
                                    placeholder="请输入短信通知内容"
                                    v-model="newcourses.template_content"
                                    show-word-limit
                                ></el-input>
                            </span>
                        </el-form-item>

                        <el-form-item  v-if="newcourses.send_sms_open===1?true:false">
                            <span style="display:block">课程短信链接：
                                <el-input style="width:500px" v-model="newcourses.msg_link" placeholder="请输入家长收到的短信通知链接" autocomplete="off"></el-input>
                            </span>
                        </el-form-item>

                        <el-form-item label="课程成功后跳转链接：" :label-width="formLabelWidth" prop="customer_id">
                            <el-switch
                                v-model="newcourses.pay_link_open"
                                :active-value="1"
                                :inactive-value="0"
                                active-color="#13ce66"
                                inactive-color="#dbdbdb">
                            </el-switch>
                        </el-form-item>
                        <el-form-item v-if="newcourses.pay_link_open===1?true:false">
                            <span style="display:block">课程跳转链接：
                                <el-input v-model="newcourses.pay_link" placeholder="请输入家长课程跳转链接" autocomplete="off"></el-input>
                            </span>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer" style="position: relative; left: 90px">
                        <el-button @click="cancelSubmit">取 消</el-button>
                        <el-button type="primary" @click="submitCourse()">确 定</el-button>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane  label="课程详情" name="课程详情">
                <div class="app" style="margin:0 auto;height:800px;padding:50px 50px 100px;overflow:scroll;">
                    <div class="card" ref="cutScreen">
                        <tinymce :height="300" v-model="newcourses.details" id='tinymce'></tinymce>
                    </div>
                    <div slot="footer" class="dialog-footer" style="position: relative; left: 90px">
                        <el-button @click="cancelSubmit">取 消</el-button>
                        <el-button type="primary" @click="submitCourseUtil()">确 定</el-button>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane  label="订单详情" name="订单详情">
                <div style="margin:0 auto;height:800px;padding:50px 50px 100px;overflow:scroll;">
                    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
                        <el-row :gutter="26">
                            <!-- 搜索框 -->
                            <el-col :span="4">
                            <el-input v-model="listQuery.title" placeholder="请输入课程名称" clearable></el-input>
                            </el-col>
                            <el-col :span="3.3">
                                领取时间：<el-date-picker
                                    v-model="listQuery.time"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                                </el-date-picker>
                            </el-col>
                            <el-col  :span="4">
                                收益状态：<el-select v-model="listQuery.status" clearable placeholder="请选择">
                                    <el-option
                                    v-for="item in listQuery.options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="4">
                                手机号：<el-input v-model="listQuery.phone" placeholder="请输入课程名称" clearable></el-input>
                            </el-col>
                            <el-col  :span="2">
                                <el-button type="primary" icon="el-icon-search" @click="searchActivity()">搜索</el-button>
                            </el-col>
                            <el-col  :span="4">
                                <el-button type="primary" icon="el-icon-search" @click="exportExcel()">导出excel</el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <!-- <span>{{orderList}}</span> -->
                    <el-table :data="orderList" class="table" border :key="orderList.length" v-loading="loading" element-loading-text="拼命加载中....">
                        <el-table-column label="序号" align="center">
                            <template slot-scope="{row}">
                            <span>{{row.order_id}}</span>
                            </template>
                        </el-table-column>
                       <el-table-column label="微信头像" align="center">
                            <template slot-scope="{row}">
                            
                            <img v-if="row.customer" :src="row.customer.avatar" class="avatar"/>
                            </template>
                        </el-table-column>

                        <el-table-column label="微信昵称" align="center">
                            <template slot-scope="{row}">
                            <span v-if="row.customer">{{row.customer.nickname}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="手机号" align="center">
                            <template slot-scope="{row}">
                            <span v-if="row.customer_telephone">{{row.customer_telephone}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="课程名称" align="center">
                            <template slot-scope="{row}">
                            <span>{{row.title}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="课程优惠价" align="center">
                            <template slot-scope="{row}">
                            <span>{{row.special_price}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="领取时间" align="center">
                            <template slot-scope="{row}">
                            <span>{{row.date_modified}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="业务员" align="center">
                            <template slot-scope="{row}">
                            <span v-if="row.shared_customer1!=null">{{row.shared_customer1.shared_customer_nickname}}</span>
                            <span v-else-if="row.shared_customer2!=null">{{row.shared_customer2.shared_customer_nickname}}</span>
                            <span v-else>无</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="所属店铺" align="center">
                            <template slot-scope="{row}">
                            <span v-if="row.store!=''">{{row.store.name}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="推荐收益" align="center">
                            <template slot-scope="{row}">
                            <span v-if="row.shared_customer1!=null">{{newcourses.first_money}}</span>
                            <span v-else-if="row.shared_customer2!=null">{{newcourses.second_money}}</span>
                            <span v-else></span>
                            </template>
                        </el-table-column>

                        <el-table-column label="上级店铺名称" align="center">
                            <template slot-scope="{row}">
                                <span v-if="row.store">{{row.store.name}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="上级店铺收益" align="center">
                            <template slot-scope="{row}">
                            <span>{{newcourses.second_money}}</span>
                            <span></span>
                            </template>
                        </el-table-column>

                        <el-table-column label="公司员工" align="center">
                            <template slot-scope="{row}">
                            <span>{{row.contact}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="收益状态" align="center">
                            <template slot-scope="{row}">
                                <span v-if="row.shared_customer1!=null&&row.shared_customer1.status=='in_confirm'||row.shared_customer2!=null&&row.shared_customer2.status=='in_confirm'" style="color:#E6A23C">确认中</span>
                                <span v-else-if="row.shared_customer1!=null&&row.shared_customer1.status=='confirmed'||row.shared_customer2!=null&&row.shared_customer2.status=='confirmed'" style="color:#67C23A">已确认</span>
                                <span v-else-if="row.shared_customer1!=null&&row.shared_customer1.status=='invalid'||row.shared_customer2!=null&&row.shared_customer2.status=='invalid'" style="color:#F56C6C">无效</span>
                                <span v-else></span>
                            </template>
                        </el-table-column>

                        <el-table-column label="收益规则" align="center">
                            <template slot-scope="{row}">
                            <span>{{row.illustration}}</span>
                            </template>
                        </el-table-column>

                    </el-table>
                    <!-- <div class="pagination-container">
                        <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
                    </div> -->
                </div>
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>

<script>
import { client } from '@/utils/alioss'
import Tinymce from '@/components/Tinymce'
import {edit,add,getorder,get_excel,execl_data} from '@/api/thk/onlinecourses'
import store from '@/store'
// import 'tinymce/plugins/media'
export default {
    name:'onlinecourses',
    components: { Tinymce },
    data(){
        return{
            total:0,
            Froms:'',
            showAddStoreDialog:false,
            textarea:'',
            formLabelWidth:'200px',
            activeName:'基础信息',
            is_cancel:'',
            coursesutil:'',
            listQuery:{
                online_courses_id:0,
                title:'',
                time:'',
                date_added_start:'',
                date_added_end:'',
                options: [{
                    value: 0,
                    label: '待确认'
                    }, {
                    value: 1,
                    label: '可提现'
                    }, {
                    value: 2,
                    label: '已提现'
                    }],
                money_item_status:'',
                customer_telephone:'',
                page:1,
                pagesize:10

            },
            orderList:[],
            allList:[],
            course:'',
            rules: {
                title:[
                    { required: true, message: '请输入课程标题', trigger: 'blur' },
                ],
                img:[
                    { required: true, message: '请选择课程封面', trigger: 'blur' },
                ],
                quantity:[
                    { required: true, message: '请输入库存数量', trigger: 'blur' }
                ],
                original_price:[
                    { required: true, message: '请输入课程原价', trigger: 'blur' }
                ],
                special_price:[
                    { required: true, message: '请输入课程优惠价', trigger: 'blur' }
                ],
                promotion_time:[
                    { required: true, message: '请选择推广时间', trigger: 'blur' }
                ],
                illustration:[
                    { required: true, message: '请输入推荐有效规则', trigger: 'blur' }
                ]
            },
            newcourses:{
                original_price:'',
                special_price:'',
                title:'',
                original_price:'',
                inventory_quantity:'',
                special_price:'',
                img:'',
                quantity:'',
                received_num:'',
                first_money:'',
                second_money:'',
                start_time:'',
                end_time:'',
                illustration:'',
                open_recommendation:0,
                send_sms_open:0,
                sms_templateid:'',
                template_content:'',
                msg_link:'',
                pay_link:'',
                pay_link_open:0,
                details:'',
                promotion_time:''
            },
            loading:true,
            lingshi:[]
        }
    },
    inject: ['reload'],
    methods:{
        timeutil(){
            this.lingshi=this.newcourses
            this.newcourses=[]
            this.newcourses=this.lingshi
            console.log("111111",this.newcourses.promotion_time)
            // this.
            // this.newcourses.promotion_time=[]
        },
        handleSizeChange(val) {
            this.listQuery.pagesize = val
            this.getOrderList()
        },
        handleCurrentChange(val) {
            this.listQuery.page = val
            this.getOrderList()
        },
        exportExcel() {
            this.downloadLoading = true
            import('@/vendor/Export2Excel').then(excel => {
                const tHeader = [
                    '序号', 
                    "昵称",
                    "手机号",
                    '课程名称',
                    '课程优惠价',
                    '领取时间',
                    '业务员',
                    '所属店铺',
                    '推荐收益',
                    '公司员工',
                    '收益状态'
                ]
                const filterVal = [
                    'order_id', 
                    ["customer","nickname"],
                    'customer_telephone',
                    'title',
                    'special_price',
                    'date_modified',
                    ['shared_customer1','shared_customer_nickname'],
                    ['store','name'],
                    ['shared_customer1','money'],
                    'contact',
                    ['shared_customer1','status']]
                const data = this.formatJson(filterVal)
                excel.export_json_to_excel({
                header: tHeader,
                data,
                filename: 'table-list'
                })
                this.downloadLoading = false
            })
        },
        formatJson(filterVal) {
            return this.orderList.map(v => filterVal.map(j => {
                if(j.length==2){
                    console.log(v[j[0]]!=null,"111111111111111")
                    if(v[j[0]]!=null){
                        if(j[1]=='status'){
                            if(v[j[0]][j[1]]=='invalid'){
                                return "无效"
                            }else if(v[j[0]][j[1]]=='in_confirm'){
                                return "确认中"
                            }else if(v[j[0]][j[1]]=='confirmed'){
                                return "已确认"
                            }
                        }else{
                            return v[j[0]][j[1]]
                        }
                    }else{
                        if(j[1]=='status'){
                            if(v['shared_customer2']!=null){
                                if(v['shared_customer2'][j[1]]=='invalid'){
                                    return "无效"
                                }else if(v['shared_customer2'][j[1]]=='in_confirm'){
                                    return "确认中"
                                }else if(v['shared_customer2'][j[1]]=='confirmed'){
                                    return "已确认"
                                }
                            }else{
                                return ''
                            }
                        }else{
                            if(v['shared_customer2']!=null){
                                return v['shared_customer2'][j[1]]
                            }else{
                                return ''
                            }
                        }
                    }
                }else{
                    return v[j]
                }
            }))
        },
        searchActivity(){
            let data=this.allList
            data.filter(item=>{
                if(item.match(this.listQuery.title)){

                }
            })
        },
        async getOrderList(){
            let that=this
            console.log(this.listQuery,"2233")
            this.listQuery.pagesize=1000000
            this.online_courses_id=this.newcourses.id
            await getorder(this.$store.getters.token,this.listQuery).then(res=>{
                this.total=res.data.list.total
                // console.log(res.data.list,"2233")
                res.data.list.data.filter(item=>{
                    console.log(item.online_courses_id,Number(that.newcourses.id))
                    if(item.online_courses_id==Number(that.newcourses.id)){
                        console.log(res.data.list.total,"2233")
                        item.illustration=that.newcourses.illustration
                        that.orderList.push(item)
                        that.allList.push(item)
                        that.loading=false
                    }
                })
                console.log(this.orderList,"diyicihuoqu")
            })
        },
        submitCourse(){
            // this.is_cancel=false
            this.reload()
            if(this.Froms!='基础信息'){
                console.log(this.newcourses)
                this.newcourses.status=1
                edit(this.$store.getters.token,this.newcourses).then(res=>{
                    console.log(res,"8869");
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                })
            }else{
                if(this.newcourses.promotion_time!=''){
                    this.newcourses.start_time=new Date(this.newcourses.promotion_time[0]).getTime()/1000
                    this.newcourses.end_time=new Date(this.newcourses.promotion_time[1]).getTime()/1000
                    console.log(this.newcourses,"xinjia")
                }
                if(this.newcourses.title!=''&&this.newcourses.img!=''&&this.newcourses.special_price!=''){
                    add(this.$store.getters.token,this.newcourses).then(res=>{
                        this.reload()
                    })
                }
            }
            this.showAddStoreDialog=!this.showAddStoreDialog
        },
        submitCourseUtil(){
            // this.is_cancel=false
            edit(this.$store.getters.token,this.newcourses).then(res=>{
                
            })
            this.reload()
            this.showAddStoreDialog=!this.showAddStoreDialog  
        },
        cancelSubmit(){
            // this.is_cancel=true
            this.showAddStoreDialog=!this.showAddStoreDialog
        },
        showAddStoreDialogs(index,row){
            this.allList=[]
            this.activeName=index;
            this.Froms=index
            this.course=row
            console.log(this.course,"123")
            this.listQuery.online_courses_id=row.id
            this.getOrderList()
            if(row!=''){
                console.log(row.start_time,"778")
                this.newcourses=row;
                this.newcourses.promotion_time=[]
                this.newcourses.promotion_time[0]=new Date(row.start_time*1000)
                this.newcourses.promotion_time[1]=new Date(row.end_time*1000)
                console.log(this.newcourses)
            }else{
                this.newcourses={
                    title:'',
                    original_price:'',
                    inventory_quantity:'',
                    special_price:'',
                    img:'',
                    quantity:'',
                    received_num:'',
                    first_money:'',
                    second_money:'',
                    start_time:'',
                    end_time:'',
                    illustration:'',
                    open_recommendation:0,
                    send_sms_open:0,
                    sms_templateid:'',
                    template_content:'',
                    msg_link:'',
                    pay_link:'',
                    pay_link_open:0,
                    details:'',
                    promotion_time:''
                }
            }
            this.showAddStoreDialog=!this.showAddStoreDialog
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg'
            const isPNG = file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 1
            if (!isJPG && !isPNG) {
            this.$message.error('上传图片只能是 JPG、PNG 格式!')
            }
            if (!isLt2M) {
            this.$message.error('上传图片大小不能超过 1MB!')
            }
            return (isJPG | isPNG) && isLt2M
        },
        upload_picture(file) {
            const that = this
            const fileName = 'user-admin_user-picture' + file.file.uid
            client().put(fileName, file.file).then((res) => {
            this.$set(that.newcourses, 'img', res.url)

            // that.storeList.wechat_qrcode = res.url
            console.log(res.url);
            that.$message.success('课程图片地址上传成功！')
            }).catch((err) => {
            that.$message.error('课程图片地址上传失败，原因：' + err)
            })
        },
    }
}
</script>

<style scoped>
  .left {
    flex: 1;
  }

  .left>div{
    display: flex;
    margin-bottom: -5px;
  }


  .left>div>span:first-child{
    flex: 2;
    text-align: right;
    font-weight: 600;
    padding: 10px 0;
    /*color: #000;*/
  }



  .left>div>span:last-child{
    flex: 3;
    text-align: left;
    margin-left: 10px;
    padding: 10px 0;
  }

  img{
    height: 50px;
    width: 50px;
    margin-right: 5px;
  }



  .first-span{
    display: inline-block;
    margin-left: 30px;
  }


  .bigImg img{
    max-width: 600px;
    min-width: 150px;
    height:auto;
    border-radius:10px;
  }

  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }
  .huifu-btn{
    margin-left: 35px;
    margin-top: 20px;
  }
  .el-icon-plus{
      border: 1px dashed #808080;
      font-size: 100px;
  }
</style>
